<template>
  <div class="flex w-100% h-100%">
    <ContentWrap>
      <DepartmentTree
        :showCheckbox="true"
        ref="departmentTreeRef"
        @node-change="handleNodeChange"
      />
    </ContentWrap>
    <ContentWrap class="flex-[3] ml-20px">
      <Form
        :model="formTotalData"
        @register="formRegister"
        :schema="formSchema"
        :key="formKey"
      />
    </ContentWrap>
  </div>
</template>

<script setup lang="tsx">
import { ContentWrap } from "@/components/ContentWrap";
import { ref, unref, nextTick, watch, reactive } from "vue";
import { ElTree } from "element-plus";
import { useForm } from "@/hooks/web/useForm";
import { Form, FormSchema } from "@/components/Form";
import { useValidator } from "@/hooks/web/useValidator";
import DepartmentTree from '@/components/DepartmentTree/indexs.vue'
const { formRegister, formMethods } = useForm()
const { setValues, getFormData, getElFormExpose } = formMethods

// 主表单


const { required } = useValidator();
const currentNodeKey = ref("");
const departmentList = ref([]);
// 添加formKey用于强制重新渲染表单
const formKey = ref(0);
const treeEl = ref<typeof ElTree>();
const formTotalData = ref({});
const field2Value = ref("");
const departmentTreeRef = ref();

// 修改自定义节点类，只对当前选中节点应用样式
const customNodeClass = (data: any, node: any) => {
  return node.isCurrent ? "is-current-node" : "";
};



const currentDepartment = ref("");
watch(
  () => currentDepartment.value,
  (val) => {
    unref(treeEl)!.filter(val);
  }
);
const currentNode = ref()
const handleNodeChange = (node:any) => {
  console.log('处理部门树节点变化',node.departmentName,node);
  currentNode.value = node.departmentName
  currentNodeKey.value = node.id
}

// 获取选中的节点
const getCheckedNodes = async () => {
  if (departmentTreeRef.value) {
    return await departmentTreeRef.value.getCheckedNodes();
  }
  return [];
}

// 修改表单 schema，确保有默认值
const formSchema = reactive<FormSchema[]>([
  {
    field: "name",
    label: "采集任务名称",
    component: "Input",
    componentProps: {
      // disabled: true,
    },
    formItemProps: {
      rules: [required()],
    },
    colProps: {
      span: 24,
    },
    value: (formTotalData.value as { name?: string })?.name || "", // 使用表单数据的值
  },
  {
    field: "validTime",
    label: "采集截止日期",
    component: "DatePicker",
    componentProps: {
      type: "date",
      valueFormat: "YYYY-MM-DD", // 添加这一行
    },
    formItemProps: {
      rules: [required()],
    },
    colProps: {
      span: 24,
    },
    value: (formTotalData.value as { validTime?: string })?.validTime || "",
  },
  {
    field: "remark",
    label: "备注",
    componentProps: {
      placeholder: "请输入备注信息",
      type: "textarea",
      rows: 3,
    },
    colProps: {
      span: 24,
    },
    component: "Input",
    value: (formTotalData.value as { remark?: string })?.remark || "",
  },
]);






// 修改 submit 方法，确保返回表单数据
const submit = async () => {
  const elForm = await getElFormExpose()
  const valid = await elForm?.validate().catch((err) => {
    console.log(err)
    return false
  })

  if (valid) {
    const formData = await getFormData()
    // 添加部门名称到表单数据
    // formData.departmentName = currentNode.value
    return formData
  }
  return null
}
// 暴露方法给父组件
defineExpose({
  getCheckedNodes,
  submit: submit
});
</script>

<style scoped lang="less">
:deep(.el-tree-node__content) {
  height: 40px !important;
}

:deep(.is-current-node .el-tree-node .el-tree-node__content) {
  background-color: transparent !important;
  color: inherit !important;
  font-weight: normal;
}
:deep(.is-current-node > .el-tree-node__content) {
  background-color: var(--el-color-primary) !important;
  border-radius: 0 20px 20px 0;
  color: var(--el-tree-content-color) !important;
  font-weight: bold;
}

:deep(.el-tree) {
  background: transparent !important;
}

:deep(.el-form-item) {
  display: flex;
  flex-direction: column !important;
}
:deep(.el-form-item__label-wrap) {
  margin-left: 0 !important;
}
:deep(.el-select) {
  width: 100% !important;
}
</style>
